<template>
    <div >
        <Row :gutter="16">
            <Col span="5">
            <div class="groupsbox">
                <div class="groupbox-div">
                    <ul>
                        <li class="groupli" @click.stop="changegroup(group,groupindex)" :class="{groupActive:groupVar==groupindex}" v-for="(group,groupindex) in groupData" :key="groupindex">{{group.name}}（{{group.sum}}）</li>
                    </ul>
                </div>
                <div class="groupAdd ivu-mt-8 ivu-mb-8" @click.stop="changeAddgroup()"><a >新建分组</a></div>
            </div>
                    </Col>
            <Col span="19" v-if="type==3">
            <Row class="imgrowup">
                <Col class="ivu-mr-16"><span>大小不超过10M</span></Col>
                <Col>
                <div>
                    <Upload action="//jsonplaceholder.typicode.com/posts/">
                        <Button>上传文件</Button>
                    </Upload>
                </div>
                                    </Col>
            </Row>
            <div class="scrollbox">
                <Scroll :on-reach-bottom="handleReachBottom" :distance-to-edge="[1,1]">
                    <div class="scrollbox-div">
                        <div>
                            <img src="./../../../assets/images/resource.png" class="scrollimg">
                            <div class="scrollname">地图。jpg</div>
                        </div>
                    </div>
                </Scroll>
            </div>
            </Col>
            <Col span="19" v-if="type==4">
            <Row class="imgrowup">
                <Col class="ivu-mr-16"><span></span></Col>
                <Col>
                <div>
                    <Upload action="//jsonplaceholder.typicode.com/posts/">
                        <Button>上传音频</Button>
                    </Upload>
                </div>
                </Col>
            </Row>
            <div class="scrollbox">
                <Scroll :on-reach-bottom="handleReachBottom" :distance-to-edge="[1,1]">
                    <div class="scrollbox-audio" v-for="(item,index) in list" :key="index">
                        <div>
                            <Row :gutter="16">
                                <Col span="16">
                                    <div class="audioname-na ivu-mt-8">{{ item.name }}</div>
                                    <div >{{item.date}}</div>
                                </Col>
                                <Col  span="8">
                                    <audio :id="'myAudio'+index" :src="item.audioSrc" @canplay="getDuration('myAudio'+index,index)"></audio>
                                    <div class="audioControls" @click.stop="audioClick('myAudio'+index,index)">
                                        <!-- <Icon :type="`${item.played}?'md-arrow-dropright-circle':'md-arrow-dropleft'`" /> -->
                                        <img class="btn-audio" v-if="!item.played" src="./../../../assets/images/audio.png">
                                        <img class="btn-audio" v-else src="./../../../assets/images/audio.gif">
                                        <div>{{item.duration}}</div>

                                    </div>
                                </Col>
                            </Row>
                           
                        </div>
                    </div>
                </Scroll>
            </div>
            </Col>
            <Col span="19" v-if="type==5">
            <Row class="imgrowup">
                <Col class="ivu-mr-16"><span></span></Col>
                <Col>
                <div>
                    <Upload action="//jsonplaceholder.typicode.com/posts/">
                        <Button>上传视频</Button>
                    </Upload>
                </div>
                                    </Col>
            </Row>
            <div class="scrollbox">
                <Scroll :on-reach-bottom="handleReachBottom" :distance-to-edge="[1,1]">
                    <div class="scrollbox-video">
                        <div>
                            <Row :gutter="16">
                                <Col span="8">
                                <div>
                                    <img src="./../../../assets/images/resource.png" class="scrollimg">
                                    <div class="videotime"><Icon type="md-arrow-dropright" />00:18</div>
                                </div>
                                </Col>
                                <Col span="14" class="ivu-ml-16">
                                <div class="ivu-mt-16">视频名称</div>
                                <div style="margin-top:30px">2023-3-27 14:51</div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                    <div class="scrollbox-video">
                        <div>
                            <Row :gutter="16">
                                <Col span="8">
                                <div>
                                    <img src="./../../../assets/images/resource.png" class="scrollimg">
                                    <div class="videotime"><Icon type="md-arrow-dropright" />00:18</div>
                                </div>
                                </Col>
                                <Col span="14" class="ivu-ml-16">
                                <div class="ivu-mt-16">视频名称</div>
                                <div style="margin-top:30px">2023-3-27 14:51</div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                    <div class="scrollbox-video">
                        <div>
                            <Row :gutter="16">
                                <Col span="8">
                                <div>
                                    <img src="./../../../assets/images/resource.png" class="scrollimg">
                                    <div class="videotime"><Icon type="md-arrow-dropright" />00:18</div>
                                </div>
                                </Col>
                                <Col span="14" class="ivu-ml-16">
                                <div class="ivu-mt-16">视频名称</div>
                                <div style="margin-top:30px">2023-3-27 14:51</div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </Scroll>
            </div>
            </Col>
        </Row>
        <Modal v-model="modalgroup" title="新建分组" width="400">
            <Input placeholder="请输入分组名称" v-width="300"/>
        </Modal>
    </div>

</template>
<script>
    export default {
        props: ['type'],
        data () {
            return {
                // 模态框
                groupData: [
                    {
                        name: '我的图片',
                        sum: 233
                    },
                    {
                        name: '文章配图',
                        sum: 23
                    },
                    {
                        name: '公众号挂号',
                        sum: 23
                    }
                ],
                groupVar: 0,
                modalgroup: false,
                height: null,
                list:[
                    {
                        name:'音频名称22222222222222222',
                        date:'2021-2-23',
                        played:false,
                        duration:2,
                        audioSrc:require('./../../../assets/images/mp.mp3')
                        

                    },
                    {
                        name:'音频名称22222222222222222',
                        date:'2021-2-23',
                        played:false,
                        duration:2,
                        audioSrc:require('./../../../assets/images/mp.mp3')
                        

                    },
                    {
                        name:'音频名称22222222222222222',
                        date:'2021-2-23',
                        played:false,
                        duration:2,
                        audioSrc:require('./../../../assets/images/mp.mp3')
                        

                    }
                ],
                
            }
        },
        methods: {
            // 图片
            changegroup (item, index) {
                this.groupVar = index;
            },
            changeAddgroup () {
                this.modalgroup = true;
            },
            // 懒加载
            handleReachBottom () {

            },
            //音频操作
            /**
            * 操作audio
            */ 
            audioClick(id, index) {
                let _this = this
                let audio = document.getElementById(id)  //获取当前操作的audio
                if (this.list[index].audioStatus && this.list[index].audioStatus == 'playing') {
                //当前组件正在播放 则暂停播放
                _this.$set(this.list[index], 'played', false) //记录播放还是暂停的状态
                _this.$set(this.list[index], 'audioStatus', 'pause') //
                audio.pause()
                } else {
                //如果没有播放状态 则开始播放
                this.$set(this.list[index], 'played', true)
                this.$set(this.list[index], 'audioStatus', 'playing')
                audio.play()
                audio.addEventListener("ended", function () {  
                    //监听播放播放结束后 重置播放状态为初始状态  
                    _this.$set(_this.list[index], 'played', false)
                    _this.$set(_this.list[index], 'audioStatus', 'pause')
                    audio.pause()
                });
                }
            },
            getDuration(id,index){
                let audio = document.getElementById(id)
                this.$set(this.list[index], 'duration', Math.round(audio.duration))
            }
                }
    }
</script>
<style scoped>
/* 图片弹框 */
.groupsbox{
    padding: 10px 0;
    border-right:1px solid #c5c8ce;
    height:500px;
    max-height: 600px;

}
.groupbox-div{
    height:450px;
    max-height: 550px;
}
.groupsbox ul{
    height: 100%;
    list-style:none;
    text-align: center;
    overflow-y: auto;
}
.groupli{
    padding: 10px 0;
    cursor: pointer;
}
.groupActive{
    background: #f6f7f8;
}
.groupAdd{
   font-size: 16;
}
.imgrowup{
    justify-content: flex-end;
    align-items: baseline;
}
.scrollbox{
    height: 400px;

}
.scrollbox-div{
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-block;
    margin: 10px;
}
.scrollimg{
    width: 100px;
    height: 100%;
    object-fit:contain;
}
.scrollname{

}
/deep/.ivu-scroll-container{
    height: 440px !important;
    overflow-y: auto;
}
.scrollbox-audio{
    width: 300px;
    height: 120px;
    padding: 10px;
    margin: 10px;
    display: inline-block;
}
.btn-audio{
        /* margin: 90px auto; */
        width: 50px;
        height: 50px;
    }
.audioControls{
    padding:10px 0;
    text-align: center;
}
.audioname{
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;

}
.audioname-na{
    width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom:40px
}
.scrollbox-video{
    width: 350px;
    height: 101px;
    position: relative;
    display: inline-block;
    margin: 10px;
}
.videotime{
    position:absolute;
    padding: 0 5px;
    bottom: 12px;
    left: 13px;
    background: rgba(0,0,0,.6);
    border-radius: 10px;
    width: 60px;
    color:#fff
}
</style>
